<template>
	<view v-if="goods_detail">
		<!-- 商品详情页 -->
		
			<!-- 轮播图区域 -->
		<swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000">
			<swiper-item v-for="(item, index) in goods_detail.pics" v-bind:key="index">
				<view class="swiper-item">
					<!--使用 image 标签容易缩放图片-->
					<image 
						v-bind:src="item.pics_mid_url" 
						mode="widthFix" 
						alt="" 
						v-on:click="getPreview(item.pics_mid_url)">
				</view>
			</swiper-item>
		</swiper>
		
		<!-- 商品信息区域 -->
		<view class="box">
			<!-- 价格 -->
			<view class="price">$ {{goods_detail.goods_price}}</view>
			<!-- 介绍 -->
			<view class="container">
				<view class="left">{{goods_detail.goods_name}}</view>
				<view class="right">
					<uni-icons type="star" size="30" color="gray"></uni-icons>
					<text>收藏</text>
				</view>
			</view>
			<!-- 运费 -->
			<view class="yf">快递: 免运费</view>
		</view>
	
		<!-- 商品详情信息区域 -->
		<view class="introduce">
			<rich-text :nodes="goods_detail.goods_introduce"></rich-text>
		</view>
		
		<!-- 商品底部导航区域 -->
		<view class="goods-carts">
			<uni-goods-nav :options="options" :fill="true" :button-group="buttonGroup" @click="onClick"
				@buttonClick="buttonClick" />
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				goods_detail: null, // 请求数据
				options: [{
						icon: 'shop',
						text: '店铺'
					}, {
						icon: 'cart',
						text: '购物车',
						info: 2
					}],
					buttonGroup: [{
						text: '加入购物车',
						backgroundColor: '#ff0000',
						color: '#fff'
					},
					{
						text: '立即购买',
						backgroundColor: '#ffa200',
						color: '#fff'
					}]
			};
		},
		onLoad: function (option) { 
				// console.log(option.goods_id); //打印出上个页面传递的参数。
				var id = option.goods_id
				this.getDetail(id)
		},
		// 方法
		methods: {
			// 获取请求数据
			async getDetail(id) {
				const { data:res } = await uni.$http.get(`/api/public/v1/goods/detail?goods_id=${id}`)
				// console.log(res)
				// 请求数据失败
				if (res.meta.status !== 200) return uni.$showMsg()
				// 解决图片显示不出的问题  解决图片之间有间隙的问题
				res.message.goods_introduce = res.message.goods_introduce.replace(/webp/g, 'jpg').replace(/<img /g, '<img style="display:bolck;" ')
				this.goods_detail = res.message
			},
			// 点击图片, 实现预览效果
			getPreview(url) {
				// console.log(url);
				// console.log(this.goods_detail.pics.map(item => item.pics_mid_url));
				wx.previewImage({
					showmenu: true,
				  current: url, // 当前显示图片的 http 链接, 需要的是地址不是下标.
				  urls:  this.goods_detail.pics.map(item => item.pics_mid_url)// 需要预览的图片 http 链接列表
				})
			},
			// 底部导航的方法
			onClick (e) {   // 加入购物车
				console.log(e)
				if (e.content.text == '购物车') {  // 跳转到购物车页面
					uni.switchTab({
						url: '/pages/cart/cart'
					});
				}
			},
			buttonClick (e) {  // 立即购买
				console.log(e)
			}
		}
	}
</script>

<style lang="scss">
	// 轮播图区域
	swiper {
		height: 300px;
		padding: 10px;
		swiper-item {
			border-radius: 15px;
			overflow: hidden;
		}
		.swiper-item {
			width: 100%;
			height: 100%;
			image {
				width: 100%;
				height: 100%;
			}
		}
	}
	
	// 商品信息区域
	.box {
		padding: 10px;
		.price {
			color: red;
			font-weight: 900;
			margin-bottom: 6px;
		}
		.container {
			display: flex;
			font-size: 12px;
			.left {
				width: 80%;
			}
			.right {
				width: 20%;
				display: flex;
				flex-direction: column;
				text-align: center;
				font-weight: 200;
			}
		}
		.yf {
			font-size: 12px;
			font-weight: 300;
		}
	}
	
	// 底部导航区域
	.goods-carts {
		position: fixed;
		bottom: 0;
		width: 100%;
	}
</style>
